<html>

<head></head>
<link rel="stylesheet" type="text/css" href="css/litegraph-editor.css" />
<link rel="stylesheet" type="text/css" href="css/litegraph.css" />
<script type="text/javascript" src="js/litegraph.js"></script>
<script src='js/jquery.min.js'></script>
</head>

<body style='width:100%; height:100%'>
  <div class="litegraph litegraph-editor">
    <div class="header"></div>
    <div class="tools tools-left"><span id="LGEditorTopBarLeftTools" class="selector">
        <button class="btn" id="save" onclick="save()">Save</button>
        <button class="btn" id="load">Load</button>
        <button class="btn" id="download">Download</button>
      </span></div>
    <canvas id='mycanvas' width='1024' height='720' style='border: 1px solid'></canvas>
  </div>
  <script>
    var graph = new LGraph();
    var canvas = new LGraphCanvas("#mycanvas", graph);
    graph.start()
  </script>
  <script>
    let searchParams = new URLSearchParams(window.location.search);
    var blueprintName = searchParams.has('name') ? searchParams.getParam('name') : 'default'

    async function save() {
      let config = JSON.stringify(graph.serialize())
      resp = await $.ajax({
        url: "/api/blueprint",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify({
          name: blueprintName,
          data: config
        })
      })
    }

    async function load(name) {
      resp = await $.ajax({
        url: "/api/blueprint?name=" + name,
        type: "GET",
        contentType: "application/json"
      })
      return resp.data
    }

    async function loadWidget() {
      let resp = await $.ajax({
        url: "/api/allWidget",
        type: "GET",
        contentType: "application/json"
      })
      return resp
    }

    async function trigger(nodeId) {
      resp = await $.ajax({
        url: "/api/trigger",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify({
          name: blueprintName,
          nodeId: nodeId
        })
      })
    }

    async function nodeDetail(nodeId) {
      resp = await $.ajax({
        url: "/api/node/detail",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify({
          name: blueprintName,
          nodeId: nodeId
        })
      })
      return resp
    }

  </script>
  <script>
    (async () => {
      // 加载模块
      let widget = await loadWidget();
      for (let index = 0; index < widget.length; index++) {
        let ele = widget[index];
        console.log('ele', ele)
        let w_parh = ele.path;
        let w_in = ele.in;
        let w_out = ele.out;
        let w_widget = ele.widget

        // 注册类
        function TestWidgetsNode() {
          var that = this;

          // 输入
          for (let item in ele.in) {
            let w_in = ele.in[item]
            this.addInput(w_in.name, w_in.type);
          }

          // 输出
          for (let item in ele.out) {
            let w_out = ele.out[item]
            this.addOutput(w_out.name, w_out.type);
          }

          // todo 未知作用
          this.properties = { 'noKnown': 'a' };

          // widget
          for (let item in ele.widget) {
            let widget = ele.widget[item]
            console.log('widget', widget)
            this[widget.prop] = this.addWidget(
              widget.type,
              widget.name,
              widget.init_value,
              widget.prop.trigger == true ? function (v) { console.log(v, that); (async () => { trigger(that.id) })() } : function (v) { },
              widget.prop
            );
          }
          this.size = this.computeSize();
          this.serialize_widgets = true;
        }
        TestWidgetsNode.title = ele.title;
        LiteGraph.registerNodeType(ele.path, TestWidgetsNode);
      }

      // 加载历史蓝图
      let blueprintStr = await load(blueprintName)
      if (blueprintStr != null) {
        let history = JSON.parse(blueprintStr)
        graph.configure(history)
        console.log('history', history)
      }
    })()

    // 定时查询节点属性
    setInterval(async () => {
      let data = graph.serialize();
      for (let i = 0; i < data.nodes.length; i++) {
        let node = data.nodes[i]
        let nodeD = (await nodeDetail(node.id)).data
        console.log('nodeD', nodeD)

        let nodet = graph.getNodeById(node.id)

        for (let j = 0; j < nodeD.widgetValues.length; j++) {
          let widgetValue = nodeD.widgetValues[j]
          console.log('widgetValue', widgetValue)
          nodet.widgets[0].value = widgetValue
        }
      }
    }, 100000)
  </script>
</body>

</html>